<div class="app-container with-navbar with-loader" ng-controller="MyCardController" id="my-card">

    <div class="navbar fixed-top">
        <div class="navbar-left hide-weixin" ng-click="goBack()">
            <img class="button-icon" ng-src="image/nav-left.png"/>
            <div class="button-text">返回</div>
        </div>
        <div class="navbar-title">
          我的提货卡
        </div>
    </div>

    <div class="app-content" infinite-scroll='MyCardModel.loadMore()'>

        <div class="score-filter">
            <div class="filter-item" ng-class="{active: currentTab == TAB_ALL}" ng-click="touchTabAll()">
                <span class="text">全部 <div class="count-num">{{MyCardModel.count.all}}</div></span>
            </div>
            <div class="filter-item" ng-class="{active: currentTab == TAB_CREATED}" ng-click="touchTabCreated()">
                <span class="text">未使用<div class="count-num">{{MyCardModel.count.no_used}}</div></span>
            </div>
            <div class="filter-item"  ng-class="{active: currentTab == TAB_PAID}" ng-click="touchTabPaid()">
                <span class="text">已使用<div class="count-num">{{MyCardModel.count.yes_used}}</div></span>
            </div>

        </div>

        <div class="my-card" ng-if="MyCardModel.cards && MyCardModel.cards.length">
            <div class="list-item" ng-repeat="card in MyCardModel.cards track by $index" >

                <div class="order-goods">
                    <div class="goods-item">
                        <div class="item-photo">
                            <img ng-src="image/default-photo.png" lazy-img="{{card.goods.cover_img}}"/>
                        </div>
                        <div class="item-info">
                            <div class="info-name">
                                {{card.goods.goods_name}}
                            </div>
                            <div class="info-attr" ng-if="card.status == 1">
                                {{card.created_at}}
                            </div>
                            <div class="info-attr" ng-if="card.status == 2">
                                {{order.card_order.consignee.regions}} {{order.card_order.consignee.address}}
                            </div>

                            <div class="info-attr" ng-if="card.status == 2">
                                {{card.updated_at}}
                            </div>

                        </div>
                    </div>
                </div>
                <div class="item-footer">

                    <div style="margin-top: 10px;" class="footer-button dark" ng-if="card.status ==1" ng-click="touchCard(card.card_id)">
                        使用
                    </div>

                </div>

            </div>
        </div>

        <div class="empty" ng-if="MyCardModel.isEmpty">
            <div class="empty-item">
                <img class="item-logo" ng-src="image/logo-order-empty.png"/>
                <div class="item-text">暂无任何订单</div>
            </div>
        </div>

        <div class="loading-more" ng-if="MyCardModel.isLoaded && MyCardModel.isLoading">
            正在加载...
        </div>
        <div class="loading-more" ng-if="MyCardModel.isLoaded && MyCardModel.isLastPage">
            全部加载完毕
        </div>


    </div>

</div>
